<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Coordinate Definitions ---
        const y_ground = 420;
        const x_opamp_base = 250;
        const x_opamp_tip = 350;
        const y_opamp_center = 220;
        const opamp_height = 120;
        const y_opamp_top = y_opamp_center - opamp_height / 2;
        const y_opamp_bottom = y_opamp_center + opamp_height / 2;
        const y_inverting = y_opamp_center - 25;
        const y_non_inverting = y_opamp_center + 25;
        const x_res = 450;
        const y_res_mid = 320;

        // --- Helper Functions ---

        function drawTerminal(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.stroke();
            ctx.fillStyle = 'black';
        }

        function drawNode(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 3.5, 0, 2 * Math.PI);
            ctx.fill();
        }

        function drawArrow(x1, y1, x2, y2) {
            const headlen = 10;
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        // Ground line and symbol
        ctx.beginPath();
        ctx.moveTo(30, y_ground);
        ctx.lineTo(570, y_ground);
        ctx.stroke();
        const x_ground_sym = 320;
        ctx.beginPath();
        ctx.moveTo(x_ground_sym, y_ground);
        ctx.lineTo(x_ground_sym, y_ground + 15);
        ctx.moveTo(x_ground_sym - 15, y_ground + 15);
        ctx.lineTo(x_ground_sym + 15, y_ground + 15);
        ctx.moveTo(x_ground_sym - 10, y_ground + 22);
        ctx.lineTo(x_ground_sym + 10, y_ground + 22);
        ctx.moveTo(x_ground_sym - 5, y_ground + 29);
        ctx.lineTo(x_ground_sym + 5, y_ground + 29);
        ctx.stroke();

        // Op-amp body
        ctx.beginPath();
        ctx.moveTo(x_opamp_base, y_opamp_top);
        ctx.lineTo(x_opamp_tip, y_opamp_center);
        ctx.lineTo(x_opamp_base, y_opamp_bottom);
        ctx.closePath();
        ctx.stroke();

        // Op-amp inputs
        ctx.beginPath();
        ctx.moveTo(180, y_inverting);
        ctx.lineTo(x_opamp_base, y_inverting);
        ctx.moveTo(180, y_non_inverting);
        ctx.lineTo(x_opamp_base, y_non_inverting);
        ctx.stroke();

        // Op-amp input symbols (+/-)
        ctx.font = '30px Arial';
        ctx.fillText('-', x_opamp_base + 20, y_inverting);
        ctx.fillText('+', x_opamp_base + 20, y_non_inverting);

        // Op-amp Power Supplies
        ctx.font = '22px Arial';
        const x_power = x_opamp_base + (x_opamp_tip - x_opamp_base) / 2;
        ctx.beginPath();
        ctx.moveTo(x_power, y_opamp_top);
        ctx.lineTo(x_power, y_opamp_top - 20);
        ctx.moveTo(x_power, y_opamp_bottom);
        ctx.lineTo(x_power, y_opamp_bottom + 20);
        ctx.stroke();
        ctx.textBaseline = 'bottom';
        ctx.fillText('+5.0 V', x_power, y_opamp_top - 20);
        ctx.textBaseline = 'top';
        ctx.fillText('-5.0 V', x_power, y_opamp_bottom + 20);
        ctx.textBaseline = 'middle';

        // Output line
        ctx.beginPath();
        ctx.moveTo(x_opamp_tip, y_opamp_center);
        ctx.lineTo(x_res, y_opamp_center);
        ctx.stroke();

        // Resistors
        const res_h = 40;
        const res_w = 20;
        // R1
        ctx.beginPath();
        ctx.moveTo(x_res, y_opamp_center);
        ctx.lineTo(x_res, y_res_mid - res_h/2 - 15);
        ctx.rect(x_res - res_w/2, y_res_mid - res_h/2 - 15, res_w, res_h);
        ctx.moveTo(x_res, y_res_mid + res_h/2 - 15);
        ctx.lineTo(x_res, y_res_mid);
        ctx.stroke();
        // R2
        ctx.beginPath();
        ctx.moveTo(x_res, y_res_mid);
        ctx.lineTo(x_res, y_res_mid + 15);
        ctx.rect(x_res - res_w/2, y_res_mid + 15, res_w, res_h);
        ctx.moveTo(x_res, y_res_mid + 15 + res_h);
        ctx.lineTo(x_res, y_ground);
        ctx.stroke();

        // Resistor Labels
        ctx.textAlign = 'left';
        ctx.font = 'italic 22px Arial';
        ctx.fillText('R', x_res + 20, 270);
        ctx.font = '16px Arial';
        ctx.fillText('1', x_res + 32, 276);
        ctx.font = 'italic 22px Arial';
        ctx.fillText('R', x_res + 20, 370);
        ctx.font = '16px Arial';
        ctx.fillText('2', x_res + 32, 376);
        ctx.textAlign = 'center';

        // Feedback line stub
        ctx.beginPath();
        ctx.moveTo(x_res, y_res_mid);
        ctx.lineTo(x_res - 40, y_res_mid);
        ctx.stroke();

        // Connection Nodes
        drawNode(x_opamp_tip, y_opamp_center);
        drawNode(x_res, y_opamp_center);
        drawNode(x_res, y_res_mid);
        drawNode(x_res, y_ground);

        // V_OUT
        const x_vout_term = 540;
        ctx.beginPath();
        ctx.moveTo(x_res, y_opamp_center);
        ctx.lineTo(x_vout_term, y_opamp_center);
        ctx.stroke();
        drawTerminal(x_vout_term, y_opamp_center);
        drawArrow(x_vout_term, y_ground, x_vout_term, y_opamp_center);
        ctx.textAlign = 'left';
        const y_vout_label = y_opamp_center + (y_ground - y_opamp_center) / 2;
        ctx.font = 'italic 22px Arial';
        ctx.fillText('V', x_vout_term + 15, y_vout_label);
        ctx.font = '16px Arial';
        ctx.fillText('OUT', x_vout_term + 28, y_vout_label + 6);
        
        // V_IN
        const x_vin_term = 120;
        const y_vin_term = 100;
        drawTerminal(x_vin_term, y_vin_term);
        ctx.beginPath();
        ctx.moveTo(x_vin_term, y_vin_term);
        ctx.lineTo(x_vin_term + 60, y_vin_term);
        ctx.stroke();
        const x_vin_arrow = 100;
        drawArrow(x_vin_arrow, y_ground, x_vin_arrow, y_vin_term);
        ctx.textAlign = 'right';
        const y_vin_label = y_vin_term + (y_ground - y_vin_term) / 2;
        ctx.font = 'italic 22px Arial';
        ctx.fillText('V', x_vin_arrow - 15, y_vin_label);
        ctx.font = '16px Arial';
        ctx.fillText('IN', x_vin_arrow - 15 + 11, y_vin_label + 6);

        // Figure Caption
        ctx.textAlign = 'center';
        ctx.font = '22px Arial';
        ctx.fillText('Fig. 7.1', x_ground_sym, y_ground + 50);

    </script>
</body>
</html>